/*
 * @Author: wangjunwj wangjunwj@dinglicom.com
 * @Date: 2025-03-31 10:50:05
 * @LastEditors: cx19940809
 * @LastEditTime: 2025-05-10 11:46:24
 * @FilePath: /leosmart/src/pages/OwnerMain/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { useTranslation } from 'react-i18next';
import ErrorBoundary from '@/components/ErrorBoundary';
import FocusedMineIcon from '@/assets/icon/mine-selected.svg';
import FocusedStatisticsIcon from '@/assets/icon/Statistics-selected.svg';
import SummarySelectedIcon from '@/assets/icon/overview-selected.svg';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DeviceSelectedIcon from '@/assets/icon/device-selected.svg';
import { Icon, useAppTheme } from 'tsun-smart-ui';
import Summary from '@/pages/OwnerMain/summary';
import SafeAreaLayout from '@/components/SafeAreaLayout';
const Tab = createBottomTabNavigator();

const OwnerMainScreen = () => {
  const { t } = useTranslation();
  const theme = useAppTheme();
  return (
    <Tab.Navigator
      screenLayout={(props) => {
        return <ErrorBoundary {...props} />;
      }}
      screenOptions={{
        animation: 'fade',
        headerShown: false,
        headerTitleAlign: 'center',
        tabBarInactiveTintColor: theme.colors?.neutral?.primary,
        tabBarActiveTintColor: theme.colors?.neutral?.title,
        headerStyle: {
          backgroundColor: 'transparent',
        },
      }}
    >
      <Tab.Screen
        name="summary"
        component={Summary}
        options={{
          headerShown: true,
          headerShadowVisible: false,
          headerStyle: { backgroundColor: '#DDF6EC' },
          title: t('workplace.docs.Overview', { defaultValue: '总览' }),
          headerTitle: '',
          tabBarIcon: ({ size, focused }) => {
            return (
              <>
                {focused ? (
                  <SummarySelectedIcon
                    width={size}
                    height={size}
                    color={theme.colors?.neutral?.title}
                  />
                ) : (
                  <Icon
                    name="overview"
                    size={size}
                    color={theme.colors?.neutral?.primary}
                  />
                )}
              </>
            );
          },
        }}
      />
      <Tab.Screen
        name="statistics"
        component={require('@/pages/scene/Owner/statistics').default}
        options={{
          title: t('pb.statistics', { defaultValue: '统计' }),
          tabBarIcon: ({ size, focused }) => {
            return (
              <>
                {focused ? (
                  <FocusedStatisticsIcon
                    width={size}
                    color={theme.colors?.neutral?.title}
                  />
                ) : (
                  <Icon
                    name="device-statistics"
                    size={size}
                    color={theme.colors?.neutral?.primary}
                  />
                )}
              </>
            );
          },
          headerShown: true,
          headerShadowVisible: false,
        }}
      />
      <Tab.Screen
        name="devices"
        getComponent={() => require('@/pages/scene/Owner/device').default}
        layout={SafeAreaLayout}
        options={{
          title: t('device.equipment', { defaultValue: '设备' }),
          tabBarIcon: ({ size, focused }) => {
            return (
              <>
                {focused ? (
                  <DeviceSelectedIcon
                    width={size}
                    color={theme.colors?.neutral?.title}
                  />
                ) : (
                  <Icon
                    name="equipment"
                    size={size}
                    color={theme.colors?.neutral?.primary}
                  />
                )}
              </>
            );
          },
        }}
      />
      <Tab.Screen
        name="mine"
        getComponent={() => require('@/pages/common/Profile').default}
        options={{
          title: t('userInfo.title.my', { defaultValue: '我的' }),
          headerShown: true,
          headerShadowVisible: false,
          tabBarIcon: ({ size, focused }) => {
            return (
              <>
                {focused ? (
                  <FocusedMineIcon
                    width={size}
                    color={theme.colors?.neutral?.title}
                  />
                ) : (
                  <Icon
                    name="my"
                    size={size}
                    color={theme.colors?.neutral?.primary}
                  />
                )}
              </>
            );
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default React.memo(OwnerMainScreen); // 使用 React.memo 包装组件
